<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index.html</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="js/animate.js"></script>
    <script src="js/index.js"></script>
</head>

<body>
    <!-- 快捷导航 -->
    <div class="shortcut">
        <div class="wrapper">
            <ul>
                <li><a href="#">请先登录</a></li>
                <li><a href="#">免费注册</a></li>
                <li><a href="#">我的订单</a></li>
                <li><a href="#">会员中心</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">在线客服</a></li>
                <li><a href="#"><span></span>手机版</a></li>
            </ul>
        </div>
    </div>

    <!-- 头部 -->
    <div class="header wrapper">
        <div class="logo">
            <h1><a href="index.html">淘宝</a></h1>
        </div>
        <div class="nav">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="#">生鲜</a></li>
                <li><a href="#">美食</a></li>
                <li><a href="#">餐厨</a></li>
                <li><a href="#">电器</a></li>
                <li><a href="#">居家</a></li>
                <li><a href="#">洗护</a></li>
                <li><a href="#">孕婴</a></li>
                <li><a href="#">服装</a></li>
            </ul>
        </div>
        <div class="search">
            <input type="text" placeholder="搜一搜">
            <!-- 定位 放大镜 -->
            <span></span>
        </div>
        <div class="car">
            <span>2</span>
        </div>
    </div>


    <!-- banner -->
    <div class="banner">
        <div class="wrapper">
            <!-- 侧导航 -->
            <div class="aside">
                <ul>
                    <li><a href="">电脑 /</a> <a href="">办公 /</a> <a href="">文具</a></li>
                    <li><a href="">工业品 /</a> <a href="">商业 /</a> <a href="">定制</a></li>
                    <li><a href="">电脑 /</a> <a href="">办公 /</a> <a href="">文具</a></li>
                    <li><a href="">家电 /</a> <a href="">手机 /</a> <a href="">数码</a></li>
                    <li><a href="">家具 /</a> <a href="">加装 /</a> <a href="">家居</a></li>
                    <li><a href="">女装 /</a> <a href="">男装 /</a> <a href="">童装</a></li>
                    <li><a href="">女鞋 /</a> <a href="">男鞋 /</a> <a href="">运动</a></li>
                    <li><a href="">汽车 /</a> <a href="">珠宝 /</a> <a href="">箱包</a></li>
                    <li><a href="">美妆 /</a> <a href="">洗护 /</a> <a href="">宠物</a></li>
                    <li><a href="">娱乐 /</a> <a href="">图书 /</a> <a href="">鲜花</a></li>
                </ul>
            </div>
            <div id="wrapper">
                <!-- 有多少个图,就有都少个li -->
                <ul>
                    <li>
                        <a href=""><img src="./images/q (1).jpg" alt=""></a>
                    </li>
                    <li>
                        <a href=""><img src="./images/q (2).jpg" alt=""></a>
                    </li>
                    <li>
                        <a href=""><img src="./images/q (3).jpg" alt=""></a>
                    </li>
                    <li>
                        <a href=""><img src="./images/q (4).jpg" alt=""></a>
                    </li>
                </ul>






                <!-- 箭头 -->
                <!-- prev: 上一个 -->
                <a href="javascript:;" class="prev"></a>
                <!-- next : 下一个 -->
                <a href="javascript:;" class="next"></a>

                <!-- 圆点: 当前状态: current / active -->
                <!-- js 找到用户点击的li 添加类名 li变成白色的 -->
                <ol>
                </ol>
            </div>
            <div class="right">
                <div class="ad">
                    <a href="activity.html">
                        <h4>百亿补贴 · 正品低价</h4>
                    </a>
                    <span> <a href="activity.html">查看全部</a></span>
                </div>
                <div class="ao">
                    <a href="">
                        <img src="./images/6.jpg_.avif" alt="">
                        <div>桌面风扇小型静音低噪办公室便携学生夏天宿舍床上风扇夹式</div>
                        <div><span>￥899</span></div>
                    </a>

                </div>
                <div class="bo">
                    <a href="">
                        <a href=""><span>工业精品</span></a>
                        <img src="./images/7.avif" alt="">
                    </a>
                </div>
                <div class="co">
                    <a href="">
                        <a href=""> <span>潮电数码</span></a>
                        <img src="./images/8.avif" alt="">
                    </a>
                </div>

            </div>
        </div>
    </div>

    
    <!-- 新鲜好物 -->
    <div class="goods wrapper">
        <!-- hd header 头部 -->
        <div class="hd">
            <h2>猜你喜欢<span>精选好物推荐</span></h2>
            <a href="#">查看全部</a>
        </div>
        
        <!-- body 身体, 内容 -->
        <div class="bd clearfix">
            <ul>
                <li>
                    <a href="commodity.html">
                        <img src="./images/3.jpg_.avif" alt="">
                        <h3><a href="">从概念到C实现 第2版 第二版 清华大学出版社</a></h3>

                        <a href="store.html"><span>清华大学出版社</span></a>
                        <div>￥<span>40</span></div>

                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/1.jpg_.avif" alt="">

                        <h3><a href="">旺旺旺仔牛奶每日早餐儿童成长营养复原乳饮料</a></h3>

                        <a href=""><span>旺旺记得专卖店</span></a>
                        <div>￥<span>899</span></div>

                        <b>新品</b>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/2.jpg_.avif" alt="">
                        <h3><a href="">英特尔13代酷睿i5轻薄便携学生商务办公游戏笔记本电脑</a></h3>

                        <a href=""><span>苏宁易购官方旗舰店</span></a>
                        <div>￥<span>6899</span></div>

                        <b>新品</b>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <img src="images/new_goods_1.jpg" alt="">

                        <h3><a href="">
                                睿米无线吸尘器家用小型大吸力手持吸拖一体除螨拖吸一体机 </a></h3>
                        <a href=""><span>睿米生活电器旗舰店</span></a>
                        <div>￥<span>899</span></div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/4.jpg_.avif" alt="">

                        <h3><a href="">碎冰蓝玫瑰永生花满天星干花束情人节表白</a></h3>
                        <a href=""><span>享花草</span></a>
                        <div>￥<span>29</span></div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/5.jpg_.avif" alt="">

                        <h3><a href="">尤尼克斯羽毛球拍单拍天斧88 D/S TOUR/GAME双打进攻型球拍</a></h3>
                        <a href=""><span>北京金陵体育</span></a>
                        <div>￥<span>500</span></div>
                    </a>
                </li>

            </ul>
        </div>
    </div>
    <!-- 版权区域 -->
    <div class="footer">
        <div class="wrapper">
            <div class="top">
                <ul>
                    <li>
                        <!-- 通过伪元素添加标签实现精灵图 -->
                        <span>价格亲民</span>
                    </li>
                    <li>
                        <span>物流快捷</span>
                    </li>
                    <li>
                        <span>品质新鲜</span>
                    </li>
                </ul>
            </div>
            <div class="bottom">
                <p>
                    <a href="#">关于我们</a> |
                    <a href="#">帮助中心</a> |
                    <a href="#">售后服务</a> |
                    <a href="#">配送与验收</a> |
                    <a href="#">商务合作</a> |
                    <a href="#">搜索推荐</a> |
                    <a href="#">友情链接</a>
                </p>
                <p>CopyRight @ 天猫</p>
            </div>
        </div>
    </div>
</body>

</html>